<!-- 
    css布局
        1. 标准文档流
            html标签元素按照默认方式排列布局
        2. css布局
             => 浮动 float:left|right;
             => 定位 
                  相对  绝对   固定  粘性
             => 弹性盒子布局
            
        3. 绝对定位
             => 概念： html元素相对浏览器窗口进行位置变化
             => 语法： postion:absolute
                      top:
                      left:
                      right:
                      bottom:

            => 示例:

        4. 相对定位
             => html元素相对自身位置变化
             => postion:relative
                top:
                left:
                right:
                bottom:


        5. 相对限绝对
            父元素设置为相对定位，子元素设置绝对定位
            子元素定位参照物从浏览器窗口变成了父元素

       
        弹性盒子布局
            基本概念:
               弹性盒子容器
                   =>将一个html元素设置为 display:flex; 它就成为弹性盒子容器.
               项目元素
                  => 弹性盒子容器里面的元素成为项目元素
               水平主轴
                  => 弹性盒子默认水平方向有一根主轴
               垂直交叉轴
                  => 弹性盒子默认垂直方向有一根交叉轴
            特性：
               1. 弹性盒子容器中的项目元素默认沿水平主轴排列
               2. 项目元素默认靠左排列
                    justify-content: start;
               3. 项目元素沿交叉轴排列方式
                     align-items: start;

               4. 改默认主轴方向
                   
               5. 项目元素相关样式
                 flex-grow:数值 0
                    =>容器有剩余空间时，项目元素占剩余空间的比例
                flex-shrink:数值 1
                    =>项目元素超出容器空间，项目元素表现形式
-->


